<#assign column_name='/'/>
<#include "default/common/head.html" />
<style type="text/css">
    .expert{
        display: inline-block;
        width: calc(14.53vw);
        height: calc(10.57vw);
        box-shadow: 0 10px 22px rgba(62, 162, 103, 0.35);

        background-color: #ffffff;background-position:center;background-size:contain;
    }
    .peoplename{
        height: 35px;
        color: #3ea267;
        font-family: "STSong","SimSun","Source Han Serif CN";
        font-size: 24px;
        line-height: 36px;
        letter-spacing: 1.8px;
        font-weight:900;
    }
    .peopledesc{
        color: #414141;
        text-align:justify;
        text-justify:inter-ideograph;
    }
    .left2center{
        animation: movetocenter 1s ease-out normal;
    }
    .center2right{
        animation: movetoright 1s ease-out normal;
    }
    .right2left{
        animation: movetoleft 1s linear normal;
    }
    .center2left{
        animation: backtoleft 1s ease-out normal;
    }
    .right2center{
        animation: backtocenter 1s ease-out normal;
    }
    .left2right{
        animation: backtoright 1s linear normal;
    }
    @keyframes movetocenter
    {
        0%      {transform: scale(0.54);    z-index:0;      left:calc(-4vw);}
        100%    {transform: scale(1);       z-index:1;      left:calc(15vw);}
    }
    @keyframes movetoright
    {
        0%      {transform: scale(1);       z-index:1;      left:calc(15vw);}
        100%    {transform: scale(0.54);    z-index:0;      left:calc(34vw);}
    }
    @keyframes movetoleft
    {
        0%      {transform: scale(0.54);    z-index:0;      left:calc(34vw);   opacity:0.9}
        30%      {transform: scale(0.4);    z-index:-1;      left:calc(5vw);  opacity:0.6}
        100%    {transform: scale(0.54);    z-index:0;      left:calc(-4vw);    opacity:1}

    }
    @keyframes backtoleft
    {
        0%    {transform: scale(1);       z-index:1;      left:calc(15vw);}
        100%      {transform: scale(0.54);    z-index:0;      left:calc(-4vw);}
    }
    @keyframes backtocenter
    {

        0%    {transform: scale(0.54);    z-index:0;      left:calc(34vw);}
        100%      {transform: scale(1);       z-index:1;      left:calc(15vw);}
    }
    @keyframes backtoright
    {
        0%    {transform: scale(0.54);    z-index:0;      left:calc(-4vw);    opacity:1}
        30%      {transform: scale(0.4);    z-index:-1;      left:calc(25vw);  opacity:0.6}
        100%      {transform: scale(0.54);    z-index:0;      left:calc(34vw);   opacity:1}
    }
</style>
<div class="pagebox">
    <div class="of-banner">
        <div class="layui-carousel" id="banner">
            <div carousel-item="">
                <@of.ad site_id=site.site_id edition="banner">
                <#list ad as data >
                <div><a href="${data.ad_jump_url!'javascript:;'}">
                    <img
                            src="${webroot}${data.ad_image_url}"
                            alt="${data.ad_name}" style="width: 100%;"></a>
                </div>
                </#list>
                </@of.ad>

            </div>
        </div>
    </div>
    <div class="index-1" style="">
        <!--start 统计绿家园计数据展示-->
        <div style="width: 62.5%;display: inline-block;text-align: left">
            <p>
                <img src="${reroot}/static/assets/image/txt-intro1.png" width="41.6%">


                <@of.ad site_id=site.site_id edition="play_video">
                <#list ad as data >
                <a href="${data.ad_jump_url!'javascript:;'}">
                    <img src="${reroot}/static/assets/image/button1.png" width="11.66%" style="margin-left: 2%">
                </a>
                </#list>
                </@of.ad>
                <a href="about.html">
                <img src="${reroot}/static/assets/image/button2.png" width="10%" style="margin-left: 2%">
                </a>
            </p>
            <p style="margin-left: 2px;margin-top: 8px">
                <img src="${reroot}/static/assets/image/txt-intro2.png" width="60%">
            </p>
            <p style="margin-top: 5%">
                <img src="${reroot}/static/assets/image/text3.png" style="width: 100%">
            </p>
        </div>
        <!--end 统计绿家园计数据展示-->
        <!--start 专家志愿者成员介绍-->

        <div class="index-midbox">
            <div class="left-box">
                <div class="left-box-btn" onclick="leftbtn()"></div>
            </div>
            <div class="midbox-content">
                <div id="boxleft" style="position:absolute;transform: scale(0.54);left:calc(-4vw);z-index: 0;">
                    <div style="position:relative;width: calc(31.85vw);height: calc(35.41vw);background-image: url('./img/people-box.png');background-size: contain;background-position: center;">
                        <div style="position:absolute;left:calc(10.2vw);top:calc(-4.4vw);width:calc(11.45vw);height: calc(11.45vw);border:#d1f7e2 solid 4px;border-radius: calc(11.45vw);background-image: url('./img/fakehead.png');background-position: center;background-size: contain"></div>
                    </div>
                </div>
                <div id="boxmiddle" style="position: absolute;left:calc(15vw);z-index: 1;">
                    <div style="position:relative;width: calc(31.85vw);height: calc(35.41vw);background-image: url('./img/people-box.png');background-size: contain;background-position: center;">
                        <div style="width:70%;height:70%;position:absolute;left:15%;bottom:0;">
                            <span class="peoplename">吴安心</span>
                            <p class="peopledesc">在法律的保护下我们有了更强大的武器，然而“自然”又该被谁守护呢？新环保法实施后,作为环境律师的吴安心让环境受害者们开始走上依法维权之路。过程的艰辛仅是对公益事业的热情远远不够攻克的，要付出大量的时间和精力。用法律知识来守护环境是他现在正在做的，更是未来会坚持做下去的。</p>
                        </div>
                        <div style="position:absolute;left:calc(10.2vw);top:calc(-4.4vw);width:calc(11.45vw);height: calc(11.45vw);border:#d1f7e2 solid 4px;border-radius: calc(11.45vw);background-image: url('./img/fakehead.png');background-position: center;background-size: contain"></div>
                    </div>
                </div>
                <div id="boxright"  style="position:absolute;transform: scale(0.54);left:calc(34vw);top:0;z-index: 0;">
                    <div style="position:relative;width: calc(31.85vw);height: calc(35.41vw);background-image: url('./img/people-box.png');background-size: contain;background-position: center;">
                        <div style="position:absolute;left:calc(10.2vw);top:calc(-4.4vw);width:calc(11.45vw);height: calc(11.45vw);border:#d1f7e2 solid 4px;border-radius: calc(11.45vw);background-image: url('./img/fakehead.png');background-position: center;background-size: contain"></div>
                    </div>
                </div>
            </div>
            <div class="right-box">
                <div class="right-box-btn" onclick="rightbtn()"></div>
            </div>
        </div>
        <!--end 专家志愿者成员介绍-->



    </div>

<div class="content">
    <img src="${reroot}/static/assets/image/index-txt2.png" width="10%">



    <!--start 新闻报道-->

<div class="index-midbox2">
    <div class="left-box">
        <div class="left-box-btn" id="leftbtn1"></div>
    </div>
    <div class="midbox-content"  id="midbox-content1">
        <@of.ad site_id=site.site_id edition="media_report">
        <#list ad as data >
        <a style="background-image: url('${webroot}/${data.ad_image_url}')" class="news" href="${data.ad_jump_url!'javascript:;'}">
        </a>
        </#list>
        </@of.ad>
    </div>
    <div class="right-box">
        <div class="right-box-btn" id="rightbtn1"></div>
    </div>
</div>


    <!--end 新闻报道-->
</div>

<div id="fakelist" style="display: none">


    <@of.content_list limit="10" site_id = site.site_id column_english="expert">
    <#list content_list as data >
    <div>
        <a href="${webroot}/${data.url}" target="_blank">
        <div style="width:70%;height:70%;position:absolute;left:15%;bottom:0;">
            <span class="peoplename">${data.peopleName}</span>
            <p class="peopledesc">${data.peopleDesc}</p>
        </div>
        <div style="position:absolute;left:calc(10.2vw);top:calc(-4.4vw);width:calc(11.45vw);height: calc(11.45vw);border:#d1f7e2 solid 4px;border-radius: calc(11.45vw);background-image: url('${webroot}${data.thumbnail}');background-position: center;background-size: contain"></div>
        </a>
    </div>
    </#list>
    </@of.content_list>

</div>

<script>
    layui.use(['carousel', 'element'], function () {
        var carousel = layui.carousel;
        var element = layui.element;
        //图片轮播
        carousel.render({
            elem: '#banner'
            , width: '100%' //设置容器宽度
            , arrow: 'always' //始终显示箭头
            , height: '100%'
            , autoplay: true
            , full: false
            , interval: 3000
        });
    });
</script>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>


<script src="https://cdn.bootcss.com/slick-carousel/1.9.0/slick.min.js"></script>

<script>

    var items=$('#fakelist>div');
    var total_items=items.length;
    var init_left=0;
    function refresh_people(){
        $('#boxleft>div').html(items[init_left]);
        $('#boxmiddle>div').html(items[(init_left+1)%total_items]);
        $('#boxright>div').html(items[(init_left+2)%total_items]);
    }
    refresh_people()
    function clearcss(){

    }
    function leftbtn(){
        setTimeout(() => {
            init_left=(init_left+1)%total_items;
        refresh_people();
        $('#boxleft').removeClass('left2right');
        $('#boxmiddle').removeClass('center2left');
        $('#boxright').removeClass('right2center');

    }, 1000);
        setTimeout(() => {$('#boxleft>div').html(items[(init_left+3)%total_items]);}, 200);
        $('#boxleft').addClass('left2right');
        $('#boxmiddle').addClass('center2left');
        $('#boxright').addClass('right2center');
    }
    function rightbtn(){
        setTimeout(() => {
            init_left=(init_left+total_items-1)%total_items;
        refresh_people();
        $('#boxleft').removeClass('left2center');
        $('#boxmiddle').removeClass('center2right');
        $('#boxright').removeClass('right2left');
    }, 1000);
        setTimeout(() => {$('#boxright>div').html(items[(init_left+total_items-1)%total_items]);}, 200);
        $('#boxleft').addClass('left2center');
        $('#boxmiddle').addClass('center2right');
        $('#boxright').addClass('right2left');
    }

    $('#midbox-content1').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 2000,
        prevArrow:'#leftbtn1',
        nextArrow:'#rightbtn1',
    });
    $('#midbox-content3').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 2000,
        prevArrow:'#leftbtn3',
        nextArrow:'#rightbtn3',
    });
</script>
<#include "default/common/links.html" />
<#include "default/common/footer.html" />